<template>
  <div class="container" ref="mainCon">
    <topTitle
      v-if="userType === 'JC'"
      :titleText="titleText"
      :titleExplain="titleExplain"
    ></topTitle>
    <div class="info" v-if="userType === 'XM' || userType === 'QY'">
      <el-row class="topBox" style="positon: relative; height: 36px">
        <div class="fl">
          <el-select v-model="filterField.projectId" placeholder="暂无关联项目">
            <el-option
              v-for="(item, index) of projectList"
              :key="index"
              :label="item.name"
              :value="item.code"
              :title="item.name"
              @click.native="changeProject(item.code)"
            ></el-option>
          </el-select>
        </div>
      </el-row>
    </div>
    <div class="mainCon">
      <el-row
        class="toolbar searchInputWidth"
        style="padding-top: 24px !important"
        v-if="userType === 'JC'"
      >
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="项目名称" class="row-padding-bottom">
              <el-input
                v-model="filterField.projectName"
                placeholder="请输入项目名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="区域" class="row-padding-bottom">
              <el-cascader
                ref="manageArea"
                v-model="areaId"
                :options="areasOptions"
                @change="getAreaId"
                clearable
                filterable
                :props="{ checkStrictly: true }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="行业" class="row-padding-bottom">
                <el-select
                  v-model="filterField.industryId"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in industryOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="建设方" class="row-padding-bottom">
                <el-input
                  v-model="filterField.companyName"
                  placeholder="请输入建设方名称"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="施工方" class="row-padding-bottom">
                <el-input
                  v-model="filterField.pbName"
                  placeholder="请输入施工方名称"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="状态" class="row-padding-bottom">
                <el-select
                  v-model="filterField.proStatus"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="投资类型" class="row-padding-bottom">
                <el-select
                  v-model="filterField.investment"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in investmentOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="查看情况" class="row-padding-bottom">
                <el-select
                  v-model="filterField.checkStatus"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in checkStatusOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </template>
          <el-col :lg="8" :xl="6">
            <el-form-item>
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="spacing" v-if="userType === 'JC'"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <!-- 表格 -->
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          @sort-change="sortChange"
          :data="tableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          v-loading="loading"
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            v-if="userType === 'JC'"
            prop="projectName"
            label="项目名称"
            :formatter="formatTd"
            width="230"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            v-if="userType === 'JC'"
            prop="areaName"
            label="区域"
            align="center"
            :formatter="formatTd"
            width="150"
          ></el-table-column>
          <el-table-column
            v-if="userType === 'JC'"
            prop="industryName"
            label="行业"
            align="center"
            :formatter="formatTd"
            width="80"
          ></el-table-column>
          <el-table-column
            prop="companyName"
            label="建设方"
            :formatter="formatTd"
            width="230"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.companyName"
                :columnName="'companyName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="pbName"
            label="施工方"
            :formatter="formatTd"
            width="230"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.pbName"
                :columnName="'pbName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="investmentName"
            label="投资类型"
            align="center"
            :formatter="formatTd"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="proStatusName"
            label="项目状态"
            align="center"
            :formatter="formatTd"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="applicationCost"
            label="申请拨付人工费(元)"
            sortable="custom"
            align="center"
            :formatter="formatTd"
            width="230"
          ></el-table-column>
          <el-table-column
            prop="explain"
            label="费用说明"
            :formatter="formatTd"
            width="230"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.explain"
                :columnName="'explain'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="申请时间"
            sortable="custom"
            align="center"
            :formatter="formatTd"
            width="230"
          ></el-table-column>
          <el-table-column
            prop="checkStatusName"
            label="查看情况"
            align="center"
            :formatter="formatTd"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="statusName"
            label="状态"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column label="操作" align="left" fixed="right" width="120">
            <template slot-scope="scope">
              <el-link
                v-hasBtn="['laborCostCheck:detail', 'laborCostCheckJSF:detail']"
                type="primary"
                @click="showDialog(scope.row)"
                >查看详情</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
      <!-- 审核 -->
      <el-dialog
        title="查看详情"
        :visible.sync="detailDialog"
        @close="closeDialog"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        width="640px"
      >
        <el-form ref="ruleForm" label-width="120px" style="padding-top: 6px">
          <el-row>
            <el-col :span="24" class="labelWidthSty mrT4">
              <span class="gridContent color333 fontSizeF fontWeight"
                >项目名称：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                detailInfo.projectName || '--'
              }}</span>
            </el-col>
            <el-col :span="24" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >建设方：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                detailInfo.companyName || '--'
              }}</span>
            </el-col>
            <el-col :span="24" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >申请拨付人工费（元）：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                detailInfo.applicationCost || '--'
              }}</span>
            </el-col>
            <el-col :span="24" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >费用说明：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                detailInfo.explain || '--'
              }}</span>
            </el-col>
            <el-col :span="24" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >上传附件：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">
                <template v-if="detailInfo.file && detailInfo.file.length > 0">
                  <span>已上传</span>
                  <el-link @click="showAttach(detailInfo.file)" type="primary"
                    >查看</el-link
                  >
                </template>
                <template v-else>
                  <span>未上传</span>
                </template>
              </span>
            </el-col>
            <el-col :span="24" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >提交时间：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                detailInfo.createTime || '--'
              }}</span>
            </el-col>
            <el-col :span="24" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >查看情况：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                detailInfo.checkStatusName || '--'
              }}</span>
            </el-col>
            <el-col :span="24" class="labelWidthSty detailInfoItemSty mrB30">
              <span class="gridContent color333 fontSizeF fontWeight"
                >状态：</span
              >
              <span class="gridContent contentSty color666 fontSizeF"
                >{{ detailInfo.statusName || '--'
                }}<span v-if="detailInfo.status === 'REVOKE'" style="color: red"
                  >(原因：{{ detailInfo.reason }})</span
                ></span
              >
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
      <!-- 附件 -->
      <contractEnclosureDialog
        v-if="uploadFile"
        dialogTitle="查看附件"
        :tableData="fileList"
        @closeDialog="hiddenDialog"
      ></contractEnclosureDialog>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import scrollTable from '@/mixin/scrollTable.js'

export default {
  name: 'laborCostCheck',
  mixins: [scrollTable],
  data() {
    return {
      userType: '',
      projectList: [],
      titleText: '人工费拨付申请',
      titleExplain:
        '人工费拨付申请，施工方向建设方在线提交的人工费拨付申请，建设方和监察可查看',
      checkStatusOptions: [],
      tableList: [],
      requestUrl: 'api-acc/laborcost/expand/list',
      //搜索条件
      areaId: '', //区域
      filterField: {
        projectName: '', //项目名称
        areaId: '', //区域
        industryId: '', //行业
        companyName: '', //建设方
        pbName: '', //施工方
        projectCompanyId: '',
        proStatus: '',
        investment: '', //投资类型
        checkStatus: '',
        projectId: '',
      },
      loading: false,
      isShow: false,
      detailInfo: {},
      detailDialog: false,
      uploadFile: false,
      fileList: [],
      advanced: false,
    }
  },
  computed: {
    ...mapState([
      'investmentOptions',
      'statusOptions',
      'areasOptions',
      'industryOptions',
    ]),
  },
  async mounted() {
    if (
      this.$store.state.userType == 'PROJECT_ADMINISTRATOR' ||
      this.$store.state.userType == 'LABOR_ADMINISTRATOR' ||
      this.$store.state.userType == 'PROJECT_OWNER'
    ) {
      this.userType = 'XM'
      await this.getProjectList()
    }
    if (this.$store.state.userType == 'COMPANY') {
      this.userType = 'QY'
      await this.getProjectList()
    }
    if (this.$store.state.userType == 'MONITOR') {
      this.userType = 'JC'
    }
    this.getCheckStatus()
    this.$nextTick(() => {
      this.$refs.pagination.getTableListData()
    })
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    //获取项目列表
    getProjectList() {
      return this.axios({
        method: 'post',
        url: 'api-p/projectcompany/expand/current/projects',
        data: {
          sysAppCode: localStorage.getItem('judgeRoleCode'),
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            let data = response.data.result
            this.projectList = data
            this.filterField.projectId = data[0].code
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          this.$message.error('项目列表数据获取失败')
        })
    },
    changeProject(projectId) {
      this.filterField.projectId = projectId
      this.$refs.pagination.getTableListData()
    },
    // 查看情况下拉
    getCheckStatus() {
      return this.axios({
        method: 'post',
        url: 'api-acc/laborcost/expand/getcheckstatus',
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.checkStatusOptions = response.data.result
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    //获取选中的区域最后一级id
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.filterField.areaId = areaId
    },
    // 列表
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    //弹窗
    showDialog({ id, projectId } = row, type) {
      this.getDetail({ id, projectId })
      this.detailDialog = true
    },
    closeDialog() {
      this.detailDialog = false
    },
    // 获取详情
    getDetail({ id, projectId } = params) {
      return this.axios({
        method: 'post',
        url: 'api-acc/laborcost/expand/detail',
        data: {
          id,
          projectId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.detailInfo = response.data.result
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    showAttach(fileList) {
      this.fileList = fileList
      this.uploadFile = true
    },
    hiddenDialog() {
      this.uploadFile = false
    },
  },
}
</script>
<style lang="less" scoped>
.mainCon {
  top: 210px;
  padding-top: 0;
}
.info {
  // height: 80px;
  background: #fff;
  padding: 16px 24px;
  position: relative;
  &:after {
    position: absolute;
    right: -24px;
    bottom: 0;
    left: -24px;
    height: 1px;
    content: '';
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    background-color: #e3e7e9;
    z-index: 10;
  }
  .topBox {
    /deep/.el-input__inner {
      width: 430px;
      color: #3a3a3a;
      font-size: 24px;
      line-height: 36px;
      text-align: left;
      font-weight: bold;
      border: none;
      height: 36px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-left: 0;
      // background: #e4ebf1;
    }
    /deep/.el-select__caret {
      color: #333;
      font-size: 20px;
      line-height: 36px;
    }
    /deep/.el-input__suffix {
      top: 0 !important;
    }
  }
}
</style>
